<template>
  <div class="header">
    <div class="header-content">
      <div class="header-img">
        <img src alt class="header-logo" />
      </div>
      <div class="login">
        <a href="#" class="login-btn"></a>
        <a href="#" class="login-btn" @click="dialogFormVisible = true">{{userName}}</a>
        <el-button
          type="text"
          href="#"
          class="login-btn"
          @click="loginOut"
          v-if="userName != '登录'"
        >注销</el-button>
        <router-link to="/cart">
          <div class="shopping-car iconfont">
            <el-badge :value="badge" class="item">
              <a href="#">&#xe61e;</a>
            </el-badge>
          </div>
        </router-link>
      </div>
      <el-dialog :model="form" title="Login" :visible.sync="dialogFormVisible" width="500px">
        <el-form :rules="rules">
          <el-form-item label="Account" :label-width="formLabelWidth" prop="account">
            <el-input v-model="form.account" placeholder="请输入用户名" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="Password" :label-width="formLabelWidth" prop="pwd">
            <el-input type="password" placeholder="请输入密码" v-model="form.pwd" auto-complete="off" @keyup.enter="handleLogin"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm">Reset</el-button>
          <el-button type="primary" @click="handleLogin('form')">Login</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavHeader",
  data() {
    var checkAccount = (rule, value, callback) => {
      if (value == "") {
        return callback(new Error("账号不能为空"));
      }
    };
    var checkPwd = (rule, value, callback) => {
      if (value == "") {
        return callback(new Error("密码不能为空"));
      }
    };
    // var checkAccount = (rule, value, callback) => {
    //     if (value === '') {
    //       callback(new Error('账号不能为空'));
    //     } else {
    //       if (this.form.account !== '') {
    //         this.$refs.form.validateField('account');
    //       }
    //       callback();
    //     }
    //   };
    return {
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {
        account: "",
        pwd: ""
      },
      rules: {
        account: [
          {
            validator: checkAccount,
            trigger: "blur" //何事件触发
          }
        ],
        pwd: [
          {
            validator: checkPwd,
            trigger: "blur" //何事件触发
          },
          //可以设置多重验证标准
          {
            min: 3,
            max: 5,
            message: "长度在 3 到 5 个字符"
          }
        ]
      },
      userName: "登录",
      badge: 0
    };
  },
  mounted() {
    this.checkLogin();
  },
  methods: {
    handleLogin(formName) {
      if (!this.form.account || !this.form.pwd) {
        this.$message.error("请输入账号密码");
        return;
      }
      // this.$axios.defaults.headers["Content-Type"] =
      //   "application/x-www-form-urlencoded;charset=UTF-8"; //此处是增加的代码，设置请求头的类型
      this.$axios.post("/api/users/login", {
        userName: this.form.account,
        userPwd: this.form.pwd
      }).then(res => {
        console.log(res);
        let data = res.data;
        if (data.status == "0") {
          this.$message({
            message: "登陆成功",
            type: "success"
          });
          this.userName = data.result.userName;
          this.dialogFormVisible = false;
        } else {
          this.dialogFormVisible = false;
          this.$message.error("登录失败，账号密码不正确");
        }
      })
    },
    resetForm() {
      this.form.account = "";
      this.form.pwd = "";
      // this.accountErr = false
      // this.pwdErr = false
    },
    loginOut() {
      this.$confirm("确认注销, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$axios.post("/api/users/logout").then(response => {
          let res = response.data;
          if (res.status == "0") {
            this.$message({
              type: "success",
              message: "注销成功!"
            });
            this.userName = "登录";
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消注销"
        });
      });
    },
    checkLogin() {
      this.$axios.get("/api/users/checkLogin").then(response => {
        var res = response.data;
        if (res.status == "0") {
          this.userName = res.result;
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.header {
  height: 70px;
  width: 100%;
  background: #fff;

  .header-content {
    align-content: center;
    width: 100%;
    height: 70px;
    max-width: 85%;
    margin: 0 auto;
    padding: 5px 20px 10px;
    box-sizing: border-box;
    display: flex;

    .header-img {
      flex-basis: 85%;
      cursor: pointer;

      .header-logo {
        width: 200px;
        height: 70px;
      }
    }

    .login {
      flex-basis: 10%;
      display: flex;
      width: 100%;
      line-height: 55px;
      font-size: 15px;

      .login-btn {
        text-align: center;
        width: 65px;
        padding: 0 10px;
        color: #666;
      }

      .login-btn:hover {
        color: #409eff;
      }

      .shopping-car a {
        font-size: 30px;
      }
    }
  }
  
}
.header >>> .el-badge__content {
  position absolute
  top 10px
}
</style>

